<template>
    <div class="tabbar">
        <item v-for="(item,index) of itemList" :key="index" :txt="item.itemTxt" :mark="item.itemMark" :sel='selected' @change='getval'>
            <span class="iconfont active" slot="activeImg" v-html="item.activeImage"></span>
            <span class="iconfont" slot="normalImg" v-html="item.normalImage"></span>
        </item>
    </div>
</template>
<script>
    import Item from './item'

    export default {
        components: {
            Item
        },
        data() {
            return {
                selected: this.$route.path.substr(1),
                itemList: [{
                    itemTxt: '首页',
                    itemMark: 'home',
                    activeImage: '&#xe61a;',
                    normalImage: '&#xe62c;'
                }, {
                    itemTxt: '项目',
                    itemMark: 'project',
                    activeImage: '&#xe630;',
                    normalImage: '&#xe62f;'
                }, {
                    itemTxt: '待办',
                    itemMark: 'daiban',
                    activeImage: '&#xe629;',
                    normalImage: '&#xe62a;'
                }, {
                    itemTxt: '申请',
                    itemMark: 'apply',
                    activeImage: '&#xe62d;',
                    normalImage: '&#xe62e;'
                }, {
                    itemTxt: '我的',
                    itemMark: 'my',
                    activeImage: '&#xe631;',
                    normalImage: '&#xe632;'
                }]
            }
        },
        methods: {
            getval(val) {
                this.selected = val;
                this.$router.push("/"+this.selected)
            }
        },
    }
</script>
<style>
    .tabbar {
        width: 100%;
        height: 50px;
        border-top: 1px solid #D6DCE0;
        position: fixed;
        bottom: 0;
        background: white;
        padding: 6px 0 4px 0;
    }
    .itemWrap .iconfont{
        display: inline-block;
        font-size: 22px;
        margin-bottom: 4px;
    }
    .itemWrap .active{
        color: #D9251C;
    }
</style>
